import React from 'react';
import { Toast, } from 'antd-mobile';
import wx from 'weixin-js-sdk';

export default class Index extends React.Component {
    constructor(props){
        super(props)
        this.state={
            type: 1,
            id: props.match.params.id,
            price: 0,
            list: [],
            is_bm:0,
            is_jz:0,
            is_out:0,
            is_man:0,
        }
    }
	componentDidMount(){
        document.title = '详情'
        this.getData()
        global.Ajax.hhtc_request("user/get_qrcode",{}).then(data=>{
            console.log('第一步 ', data);
			if(data.code===1){
				this.setState(data.data)
            }
        });
        
        global.Ajax.hhtc_request("web/get_share",{windowurl:window.location.href}).then(data=>{
            console.log('分享页面的数据 ', data);
            if (data.code === 1) {
                wx.config({
                    debug : false,
                    appId : data.data.appId,
                    timestamp : data.data.timestamp,
                    nonceStr : data.data.noncestr,
                    signature : data.data.signature,
                    jsApiList : [
                        // 所有要调用的 API 都要加到这个列表中
                        "updateTimelineShareData", //分享给好友
                        "updateAppMessageShareData", //分享到朋友圈
                    ]
                })
                
                wx.checkJsApi({
                    jsApiList: ['updateTimelineShareData','updateAppMessageShareData'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                    success: function(res) {
                        console.log('checkJsApi--',res)
                        // 以键值对的形式返回，可用的api值true，不可用为false
                        // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                    }
                });
                wx.error(function(res){
                    console.log(res)
                    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                });
                
                wx.ready(()=>{
                    //配置好需要分享的几个配置，这里只是演示，实际开发中应该是动态的变量
                    var shareData = {
                        title: '好友邀请你加入艺看学院',
                        desc: '你的好友正在邀请你加入艺看学院，快来看看吧',
                        link: window.location.href.split('#')[0],
                        imgUrl: 'https://yksy.qianjitianxia.com/o_1eiao12gcfa6122j1eicun0pjl8.png',//传递给微信需传递完整的带url链接
                        success:function() {
                            global.Ajax.hhtc_request("user/share",{}).then(data=>{
                                console.log('data: ', data);
                                // return Toast.success(data.msg);
                            })
                        }
                    };

                    //调用各个接口并传入配置变量
                    wx.updateTimelineShareData(shareData);
                    wx.updateAppMessageShareData(shareData);
                });
            }
        });
    
    
    
 }
    toFriend(shareData){
        console.log(shareData)
        wx.onMenuShareAppMessage(shareData);
    }
	changeType(type){
		this.setState({
			type
		})
    }
    getData(){
        global.Ajax.hhtc_request("active/active_detail",{id: this.state.id}).then(data=>{
            console.log('data: ', data);
			if(data.code===1){
                this.setState(data.data)
            }
		})
        global.Ajax.hhtc_request("active/jc_list",{id: this.state.id}).then(data=>{
            console.log('data: ', data);
			if(data.code===1){
				this.setState({
                    list: data.data
                })
            }
		})
    }
    // 报名
    baom(){
        global.Ajax.hhtc_request("active/order",{id: this.state.id}).then(data=>{
            console.log('data: ', data);
			if(data.code===1){
				if(this.state.pay_type===1){  //免费
                    this.props.history.push('/page/home/user/activity')
                }else{
                    this.props.history.push('/page/home/learn/pay/'+data.data+'/2')
                }
            }else{
                Toast.fail(data.msg,1)
            }
		})
    }
	render(){
		return(
			<div className='' style={{paddingBottom: 70}}>
                <img alt='' src={this.state.img} className='sign_img' />
                <div className='sign_detail_box'>
                    <h1>{this.state.title}</h1>
                    <p className='p1'>{this.state.is_bm===1?'已报名':'未报名'}丨{this.state.yi_bao}/{this.state.p_num}</p>
                    <p className='p2'>地址：{this.state.address}</p>
                    {this.state.is_bm ===1 && <p className='p2'>直播地址：<a href={this.state.live_addr}>{this.state.live_addr}</a></p>}
                    <p className='p2'>时间：{this.state.time}</p>
                    {this.state.is_bm ===1 &&<div className='erweima'>
                            <h1>直播二维码</h1>
                            <img src={this.state.live_code} alt=""></img>
                            <div><a href="{this.state.live_addr}">扫码进入直播间</a></div>
                           
                    </div>}
                    <div className='learn_tab'>
                        <p className={this.state.type===1?'active':''} onClick={this.changeType.bind(this,1)}>活动详情</p>
                        <p className={this.state.type===2?'active':''} onClick={this.changeType.bind(this,2)}>精彩瞬间</p>
                    </div>
                    {this.state.type===1?
                        <div className='sign_activity_box'>
                            <div dangerouslySetInnerHTML={{__html:this.state.content}}></div>
                        </div>
                    :
                        <div className='sign_other_box'>
                            {this.state.list.map((item,index)=>{
                                return((
                                    <div key={'index'+index} className='row' onClick={()=>{this.props.history.push('/page/home/signup/moment/'+item.id)}}>
                                        <img alt='' src={item.img} className='img' />
                                        <div className='right'>
                                            <h1 style={{'paddingTop':'2px'}}>{item.title}</h1>
                                            <p>{item.desc}</p>
                                        </div>
                                    </div>
                                ))
                            })}
                        </div>
                    }
                </div>
                <div className='sign_bott'>
                    {/* <div className='share_btn' onClick={this.toFriend(this.state.shareData)}>
                        <img alt='' src={require('../../imgs/shareicon.png')} />
                        <p>分享</p>
                    </div> */}
                    {/* {this.state.is_bm==0&&<div className='right'>
                        <p>价格：</p>
                        {this.state.pay_type===1&&<h1>免费</h1>}
                        {this.state.pay_type===2&&<h1>{this.state.price*1}元</h1>}
                        {this.state.pay_type===3&&<h1>{this.state.price*1}<img alt='' src={require('../../imgs/hua.png')} style={{width: 14,height: 19,}} /></h1>}
                        <div onClick={this.baom.bind(this)}>
                            <p>立即报名</p>
                            {this.state.is_zeng===1&&<span>送{this.state.zeng_num}个名额</span>}
                        </div>
                    </div>} */}
                    {this.state.is_bm==0&&<div className='right'>
                        <p>价格：</p>
                        {this.state.pay_type===1&&<h1>免费</h1>}
                        {this.state.pay_type===2&&<h1>{this.state.price*1}元</h1>}
                        {this.state.pay_type===3&&<h1>{this.state.price*1}<img alt='' src={require('../../imgs/hua.png')} 
                        
                        style={{width: 14,height: 19,}} /></h1>}
                        <div onClick={this.baom.bind(this)}>
                            {this.state.is_out===1&&<p>活动结束</p>}
                            {this.state.is_man===1&&<p>已报满</p>}
                            {(this.state.is_out===0&&this.state.is_jz===1)&&<p>报名截止</p>}
                            {(this.state.is_out===0&&this.state.is_jz===0&&this.state.is_man===0)&&<p>立即报名</p>}
                            {this.state.is_zeng===1&&<span>送{this.state.zeng_num}个名额</span>}
                        </div>
                    </div>}
                    {this.state.is_bm==1&&<div className='right bgs'>
                        <p>价格：</p>
                        {this.state.pay_type===1&&<h1>免费</h1>}
                        {this.state.pay_type===2&&<h1>{this.state.price*1}元</h1>}
                        {this.state.pay_type===3&&<h1>{this.state.price*1}<img alt='' src={require('../../imgs/hua.png')} style={{width: 14,height: 19,}} /></h1>}
                        {this.state.pay_type===4&&<h1>{this.state.price*1}<img alt='' src={require('../../imgs/hua.png')} style={{width: 14,height: 19,}} /></h1>}
                        <div>
                            {this.state.is_out===1?<p>活动结束</p>:<p>已报名</p>}
                            {this.state.is_zeng===1&&<span>送{this.state.zeng_num}个名额</span>}
                        </div>
                    </div>}
                    
                </div>
                
			</div>
		)
	}
}
